<template>
	<div class="root-box">
		<navBread1 />

		<section class="map-box">
			<div class="left-box">
				<div class="m-title">地图</div>
				<div class="mapimg">
					<!-- <img src="../../assets/img/mapbg.png" alt="" style="width: 100%" /> -->
					<div class="map-container" id="containerT" style="border-radius: 40px"></div>
				</div>
				<!--
				<div class="map-type" style="z-index: 99999">
					<div
						class="map-type-btn"
						v-for="(item, index) in mapTypeList"
						:key="item.id"
						@click="handleIndex(item, index)"
						:class="{ active: activeIndex == index }"
					>
						<img :src="activeIndex == index ? item.img : item.img1" alt="" />
						<span>{{ item.name }}</span>
					</div>
				</div>-->
				<div class="map-type1" style="z-index: 999999">
					<div @click="home">
						<img src="../../assets/img/dingwe.png" alt="" />
					</div>
					<div @click="zoomIn">
						<img src="../../assets/img/jia.png" alt="" />
					</div>
					<div @click="zoomOut">
						<img src="../../assets/img/jian.png" alt="" />
					</div>
				</div>
			</div>
			<div class="right-box">
				<div class="r1-box">
					<img class="bg-img" src="../../assets/img/l11.png" alt="" />
					<div class="item-box">
						<span class="title">累计接待游客次数：</span>
						<div class="nubox">
							<span class="num">2</span>
							<span class="num">0</span>
							<span class="unit">万次</span>
						</div>
					</div>

					<div class="item-box" style="margin-top: 28px">
						<span class="title">累计接待游客数量：</span>
						<div class="nubox">
							<span class="num">1</span>
							<span class="num">1</span>
							<span class="unit">万人次</span>
						</div>
					</div>
				</div>
				<div class="r2-box">
					<div class="m-title">年龄分布</div>
					<div class="age-content">
						<div class="row-box">
							<div class="age-icon">
								<el-badge :value="500" class="item" type="warning">
									<img src="../../assets/img/age1.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="1050" class="item" type="warning">
									<img src="../../assets/img/age2.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="8850" class="item" type="warning">
									<img src="../../assets/img/age3.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="4603" class="item" type="warning">
									<img src="../../assets/img/age4.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="2100" class="item" type="warning">
									<img src="../../assets/img/age5.png" alt="" />
								</el-badge>
							</div>
						</div>
						<div class="row-box2">旅游兴趣用户年龄性别占比</div>
						<div class="row-box">
							<div class="age-title">13~18岁</div>
							<div class="age-title">19~25岁</div>
							<div class="age-title">26~35岁</div>
							<div class="age-title">36~50岁</div>
							<div class="age-title">51~80岁</div>
						</div>
						<div class="row-box">
							<div class="age-icon">
								<el-badge :value="480" class="item" type="warning">
									<img src="../../assets/img/age6.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="3650" class="item" type="warning">
									<img src="../../assets/img/age7.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="10960" class="item" type="warning">
									<img src="../../assets/img/age8.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="2650" class="item" type="warning">
									<img src="../../assets/img/age9.png" alt="" />
								</el-badge>
							</div>
							<div class="age-icon">
								<el-badge :value="530" class="item" type="warning">
									<img src="../../assets/img/age10.png" alt="" />
								</el-badge>
							</div>
						</div>
					</div>
				</div>
				<div class="r3-box">
					<div class="m-title">来访形式</div>
					<div class="r3-content">
						<div class="r3-row-box">
							<div class="itemBox">
								<div style="width: 85px">
									<img src="../../assets/img/dr.png" alt="" />
								</div>
								<div class="itemContBox">
									<div class="itemTitle">单人</div>
									<div class="itemNum">
										<span class="num1">0.5</span>
										<span class="num2">万/人次</span>
									</div>
								</div>
							</div>
							<div class="itemBox">
								<div>
									<img src="../../assets/img/ql.png" alt="" />
								</div>
								<div class="itemContBox">
									<div class="itemTitle">情侣</div>
									<div class="itemNum">
										<span class="num1">1.6</span>
										<span class="num2">万/人次</span>
									</div>
								</div>
							</div>
						</div>
						<div class="r3-row-box" style="margin-top: 30px">
							<div class="itemBox">
								<div>
									<img src="../../assets/img/jiat.png" alt="" />
								</div>
								<div class="itemContBox">
									<div class="itemTitle">家庭</div>
									<div class="itemNum">
										<span class="num1">1</span>
										<span class="num2">万/人次</span>
									</div>
								</div>
							</div>
							<div class="itemBox">
								<div>
									<img src="../../assets/img/lyt.png" alt="" />
								</div>
								<div class="itemContBox">
									<div class="itemTitle">旅行团</div>
									<div class="itemNum">
										<span class="num1">3.2</span>
										<span class="num2">万/人次</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="rank-box">
			<div class="left-box rank-item">
				<div class="m-title">景点访问人次排名</div>
				<div class="rank-content">
					<div class="left2">
						<div class="process-box">
							<span class="title" style="width: 80px">菠萝的海</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="rgb(50, 65, 87)" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title" style="width: 80px">徐闻灯楼角</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#0AADBF" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title" style="width: 80px">徐闻博物馆</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#0EBDD0" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title" style="width: 80px">白沙湾</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#10C7DB" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title" style="width: 80px">徐闻古港</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#14D3E8" style="width: 80%"></el-progress>
						</div>
					</div>
					<div class="right2">
						<div class="fwl-item">
							<span class="title">日均访问</span>
							<span class="num">1226次</span>
						</div>
						<div class="fwl-item">
							<span class="title">最大访问</span>
							<span class="num">1226次</span>
						</div>
						<div class="fwl-item">
							<span class="title">人均消费</span>
							<span class="num">109元</span>
						</div>
						<div class="fwl-item">
							<span class="title">停留时间</span>
							<span class="num">2小时</span>
						</div>
					</div>
				</div>
			</div>
			<div class="right-box rank-item">
				<div class="m-title">热门路线浏览次数排名</div>
				<div class="rank-content">
					<div class="left2">
						<div class="process-box">
							<span class="title">南极村-徐闻灯塔脚七日游</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#FEAD54" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title">长涂岛-菠萝的海四日游</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#FEB361" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title">南极村-徐闻灯塔脚六日游</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#FFB96D" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title">长涂岛-菠萝的海七日游</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#FBBC78" style="width: 80%"></el-progress>
						</div>
						<div class="process-box">
							<span class="title">XXX南极村-徐闻灯塔脚五日游XX</span>
							<el-progress :stroke-width="22" :percentage="70" :show-text="false" color="#FFC98E" style="width: 80%"></el-progress>
						</div>
					</div>
					<div class="right2">
						<div class="fwl-item">
							<span class="title">日均访问</span>
							<span class="num">1226次</span>
						</div>
						<div class="fwl-item">
							<span class="title">最大访问</span>
							<span class="num">1226次</span>
						</div>
						<div class="fwl-item">
							<span class="title">人均消费</span>
							<span class="num">109元</span>
						</div>
						<div class="fwl-item">
							<span class="title">停留时间</span>
							<span class="num">2小时</span>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="coustomer-box">
			<div class="m-title">游客客单统计</div>
			<div class="coustomer-content">
				<div id="chart1" ref="chart1" class="chart1"></div>
				<div class="right3">
					<div class="item-row">
						<div class="item-box">
							<div class="title">OTA</div>
							<div class="item1">
								<span class="title1">总计来访</span>
								<span class="num1">1226次</span>
							</div>
							<div class="item1">
								<span class="title1">总计消费</span>
								<span class="num1">14009元</span>
							</div>
							<div class="item1">
								<span class="title1">人均消费</span>
								<span class="num1">140元</span>
							</div>
							<div class="item1">
								<span class="title1">人均购买</span>
								<span class="num1">5单</span>
							</div>
						</div>
						<div class="item-box item-box2">
							<div class="title">旅行业</div>
							<div class="item1">
								<span class="title1">总计来访</span>
								<span class="num1">1226次</span>
							</div>
							<div class="item1">
								<span class="title1">总计消费</span>
								<span class="num1">14009元</span>
							</div>
							<div class="item1">
								<span class="title1">人均消费</span>
								<span class="num1">140元</span>
							</div>
							<div class="item1">
								<span class="title1">人均购买</span>
								<span class="num1">5单</span>
							</div>
						</div>
					</div>
					<div class="item-row" style="margin-top: 10px">
						<div class="item-box item-box3">
							<div class="title">线上</div>
							<div class="item1">
								<span class="title1">总计来访</span>
								<span class="num1">1226次</span>
							</div>
							<div class="item1">
								<span class="title1">总计消费</span>
								<span class="num1">14009元</span>
							</div>
							<div class="item1">
								<span class="title1">人均消费</span>
								<span class="num1">140元</span>
							</div>
							<div class="item1">
								<span class="title1">人均购买</span>
								<span class="num1">5单</span>
							</div>
						</div>
						<div class="item-box item-box4">
							<div class="title">散客</div>
							<div class="item1">
								<span class="title1">总计来访</span>
								<span class="num1">1226次</span>
							</div>
							<div class="item1">
								<span class="title1">总计消费</span>
								<span class="num1">14009元</span>
							</div>
							<div class="item1">
								<span class="title1">人均消费</span>
								<span class="num1">140元</span>
							</div>
							<div class="item1">
								<span class="title1">人均购买</span>
								<span class="num1">5单</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="info-box">
			<div class="info-item-box user-box">
				<div class="user1">
					<div>
						<img src="../../assets/img/tx1.png" alt="" />
					</div>
					<div class="sex">男</div>
					<div style="margin-top: 8px">
						<span class="pnum">1.3</span>
						<span class="pnumunit">万/人次</span>
					</div>
				</div>
				<div class="line"></div>
				<div class="user1">
					<div>
						<img src="../../assets/img/tx2.png" alt="" />
					</div>
					<div class="sex">女</div>
					<div style="margin-top: 8px">
						<span class="pnum">2.1</span>
						<span class="pnumunit">万/人次</span>
					</div>
				</div>
			</div>
			<div class="info-item-box marry-box">
				<div class="m-title">婚姻情况</div>
				<div id="chart2" class="chart2" ref="chart2"></div>
			</div>
			<div class="info-item-box marry-box">
				<div class="m-title">子女情况</div>
				<div id="chart3" class="chart2" ref="chart3"></div>
			</div>
			<div class="info-item-box marry-box">
				<div class="m-title">子女阶段</div>
				<div id="chart4" class="chart2" ref="chart4"></div>
			</div>
		</section>

		<!-- 游客流量 -->
		<section class="flow-box">
			<div class="m-title">
				游客流量
				<span style="float: right; cursor: pointer">
					详情
					<i class="el-icon-arrow-right"></i>
				</span>
			</div>
			<div class="flow-content">
				<div class="content1">
					<div class="flow-header">
						<div class="title">游客流量</div>
						<div class="line"></div>
					</div>

					<div>
						<div class="flow-item">
							<span class="title">游客日平均流量（人次）：</span>
							<span class="num">5488</span>
						</div>
						<div class="flow-item">
							<span class="title">游客日平均人数：</span>
							<span class="num">488</span>
						</div>
						<div class="flow-item">
							<span class="title">历史最大客流量（人次）：</span>
							<span class="num">1490</span>
						</div>
						<div class="flow-item">
							<span class="title">平均游览时长：</span>
							<span class="num">60分钟</span>
						</div>
						<div class="flow-item">
							<span class="title">最热浏览月份：</span>
							<span class="num">2月</span>
						</div>
					</div>
				</div>
				<div class="content2">
					<div class="flow-header">
						<div class="title">景区年度游客流量分析</div>
						<div class="line"></div>

						<div class="flow-search">
							<div class="search-btn" :class="{ active: flowIndex == 0 }" @click="handleFlowClick(0)">本年度</div>
							<div class="search-btn" :class="{ active: flowIndex == 1 }" @click="handleFlowClick(1)">近一年</div>
							<div class="search-btn" :class="{ active: flowIndex == 2 }" @click="handleFlowClick(2)">近三年</div>
							<div class="search-btn" :class="{ active: flowIndex == 3 }" @click="handleFlowClick(3)">全部</div>
						</div>
					</div>

					<div id="chart5" class="chart5" ref="chart5"></div>
				</div>
				<div class="content3">
					<div class="flow-header">
						<div class="title">访问时段排名top5</div>
						<div class="line"></div>
					</div>

					<div id="chart6" class="chart6" ref="chart6"></div>
				</div>
			</div>
		</section>

		<section class="time-box">
			<div class="left1">
				<div class="m-title">节假日排名</div>
				<div id="chart7" class="chart7" ref="chart7"></div>
			</div>
			<div class="left1 right1">
				<div class="m-title">到访时间</div>
				<div id="chart8" class="chart7" ref="chart8"></div>
			</div>
		</section>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import navBread1 from '@/components/navBread1.vue';

import 'ol/ol.css';
import { Map, View } from 'ol'; //地图,视图
import { defaults as defaultControls } from 'ol/control'; // 引入默认控件集合
import Zoom from 'ol/control/Zoom';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile'; //可以理解为图层

export default {
	components: {
		navBread1,
	},
	data() {
		return {
			mapTypeList: [
				{ id: 1, name: '全国地图', img: require('../../assets/img/map1.png'), img1: require('../../assets/img/map2.png') },
				{ id: 2, name: '本省地图', img: require('../../assets/img/map3.png'), img1: require('../../assets/img/map4.png') },
				{ id: 3, name: '本市地图', img: require('../../assets/img/map5.png'), img1: require('../../assets/img/map6.png') },
			],
			activeIndex: 0,
			flowIndex: 0,
			map: null,
		};
	},

	mounted() {
		this.createMap();
		this.getChart1();
		this.getChart2();
		this.getChart3();
		this.getChart4();
		this.getChart5();
		this.getChart6();
		this.getChart7();
		this.getChart8();
	},

	methods: {
		zoomIn() {
			if (this.tMap) {
				this.tMap.zoomIn(); // 每次放大一级
			}
		},
		zoomOut() {
			if (this.tMap) {
				this.tMap.zoomOut(); // 每次缩小一级
			}
		},
		home() {
			this.createMap();
		},
		// 创建地图
		createMap() {
			const T = window.T;
			// 3.初始化地图对象
			this.tMap = new T.Map('containerT', {});
			// 4.设置显示地图的中心点和级别
			// 116.39759, 39.908776
			//110.145386,20.283644
			this.tMap.centerAndZoom(new T.LngLat(110.145386, 20.283644), 13);
			// 5.创建地图类型控件
			const ctrl = new T.Control.MapType([
				{
					title: '地图',
					icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
					layer: window.TMAP_NORMAL_MAP,
				},
				// {
				// 	title: '卫星',
				// 	icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
				// 	layer: window.TMAP_SATELLITE_MAP,
				// },
			]);
			// 6.将控件添加到地图，一个控件实例只能向地图中添加一次。
			// this.tMap.addControl(ctrl); //小窗口
			// 7.创建坐标，通常是调取接口获得经纬度
			const point = new T.LngLat(110.145242, 20.27632);
			// 8.创建覆盖使用的图标
			const icon = new T.Icon({
				iconUrl: '../marker-red.png',
				iconSize: new T.Point(27, 27),
				iconAnchor: new T.Point(10, 25),
			});
			// 9. 创建在该坐标上的一个图像标注实例
			const marker = new T.Marker(point, icon);
			this.tMap.on('click', (i) => {
				console.log('我被点击了');
				// 点击获取地图上的经纬度
				console.log(i.lnglat.lat);
				console.log(i.lnglat.lng);
			});

			// 10.将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
			this.tMap.addOverLay(marker);
			this.tMap.checkResize();
		},

		handleIndex(item, index) {
			this.activeIndex = index;
		},
		handleFlowClick(index) {
			this.flowIndex = index;
		},
		getChart1() {
			const myChart = echarts.init(this.$refs.chart1);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					show: false,
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: ['当月', '上年'],
				},
				grid: {
					show: false,
					left: '3%',
					top: '15%',
					right: '7%',
					bottom: '13%',
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '客单价',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
					{
						type: 'value',
						// name: "客单数",
						splitLine: {
							show: false,
						},
						axisLabel: {
							formatter: '{value} %',
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '上年',
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgb(50, 65, 87)',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						barWidth: '20',
						data: [10, 52, 200, 334, 390, 330],
					},
					{
						name: '当月',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#D9726B',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						barWidth: '20',
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart2() {
			const myChart = echarts.init(this.$refs.chart2);
			const option = {
				title: {
					show: true,
					text: '婚姻情况',
					x: '49%', // center
					y: 'center',
					textAlign: 'center',
					textStyle: {
						fontSize: '24',
						lineHeight: '28',
						fontWeight: 'normal',
						color: '#666666',
					},
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#FEAD54', 'rgb(50, 65, 87)'],
				series: [
					{
						type: 'pie',
						radius: ['45%', '60%'],
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} :  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: '未婚' },
							{ value: 3, name: '已婚' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart3() {
			const myChart = echarts.init(this.$refs.chart3);
			const option = {
				title: {
					show: true,
					text: '子女情况',
					x: '49%', // center
					y: 'center',
					textAlign: 'center',
					textStyle: {
						fontSize: '24',
						lineHeight: '28',
						fontWeight: 'normal',
						color: '#666666',
					},
				},

				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				color: ['#FEAD54', 'rgb(50, 65, 87)', '#D9726B'],
				series: [
					{
						type: 'pie',
						radius: ['45%', '60%'],
						label: {
							normal: {
								show: true,
								color: '#666666',
								formatter: '{b} :  {d}%', // 显示百分比，
							},
							emphasis: {
								show: true,
							},
						},
						labelLine: {
							normal: {
								show: true,
								length: 20,
								length2: 20,
							},
						},
						tooltip: {
							formatter(params) {
								return params.name + '  ' + params.value + '  ' + params.percent + '%';
							},
						},
						data: [
							{ value: 22, name: '有' },
							{ value: 3, name: '无' },
							{ value: 3, name: '未知' },
						],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart4() {
			const myChart = echarts.init(this.$refs.chart4);
			const option = {
				title: {
					show: true,
					text: '子女阶段',
					subtext: '100%',
					textStyle: {
						fontSize: 18,
						color: '#666666',
						fontWeight: 400,
					},
					subtextStyle: {
						fontSize: 27,
						color: '#0168B7',
						fontWeight: 500,
					},
					textAlign: 'center', //图例文字居中显示
					x: '48%', //距离左边的距离
					y: '55%', //距离上边的距离
				},
				grid: {
					show: false,
					left: '3%',
					top: '0%',
					right: '3%',
					bottom: '0%',
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} :  {d}%',
				},
				legend: {
					show: false,
					top: '5%',
					left: 'center',
					selectedMode: false,
				},
				color: ['#35FFBF', '#1D89D7', '#35EEFF', '#B074F3'],
				series: [
					{
						name: '子女阶段',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '70%'],
						startAngle: 180,
						label: {
							show: true,
							formatter(param) {
								return param.name + ' ' + param.percent * 2 + '%';
							},
						},

						data: [
							{ value: 1048, name: '未知' },
							{ value: 735, name: '孕育期' },
							{ value: 580, name: '青少年' },
							{ value: 484, name: '婴幼儿' },
							{
								value: 1048 + 735 + 580 + 484,
								itemStyle: {
									// stop the chart from rendering this piece
									color: 'none',
									decal: {
										symbol: 'none',
									},
								},
								label: {
									show: false,
								},
							},
						],
					},
				],
			};

			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart5() {
			const myChart = echarts.init(this.$refs.chart5);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				legend: {
					show: false,
					data: [],
				},

				grid: {
					top: '10%',
					left: '0%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					},
				],
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: 'Line 3',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: 'transparent',
						},
						emphasis: {
							focus: 'series',
						},
						data: [320, 10932, 201],
					},
					{
						name: 'Line 4',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0,
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: '#E7F5F6',
						},
						emphasis: {
							focus: 'series',
						},
						data: [220, 1540, 231],
					},
					{
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								color: '#079AAE',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						data: [10, 10403, 200],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart6() {
			const myChart = echarts.init(this.$refs.chart6);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: [''],
				},
				grid: {
					show: false,
					left: '16%',
					top: '10%',
					right: '10%',
					bottom: '10%',
				},
				xAxis: {
					type: 'value',
					splitLine: {
						show: false,
						lineStyle: {
							type: 'dashed',
							color: '#335B7E',
						},
					},
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						name: '单位：千/人次',
						type: 'category',
						data: ['9:00-11:00', '12:00-14:00', '15:00-17:00', '7:00-9:00', '14:00-15:00'],
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#D9726B',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						barWidth: '20',
						data: [10, 52, 200, 334, 390, 330],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart7() {
			const myChart = echarts.init(this.$refs.chart7);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: [''],
				},
				grid: {
					show: false,
					left: '6%',
					top: '10%',
					right: '10%',
					bottom: '10%',
				},
				xAxis: {
					type: 'value',
					splitLine: {
						show: false,
						lineStyle: {
							type: 'dashed',
							color: '#335B7E',
						},
					},
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						name: '',
						type: 'category',
						data: ['春节', '元宵节', '端午节', '清明节', '国庆节', '中秋节'],
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '',
						type: 'bar',
						itemStyle: {
							normal: {
								color: '#FEAD54',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						showBackground: true,
						backgroundStyle: {
							color: '#E8F1F7',
						},
						barWidth: '20',
						data: [1980, 1756, 0, 0, 0, 0],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},

		getChart8() {
			const myChart = echarts.init(this.$refs.chart8);
			const option = {
				tooltip: { trigger: 'axis' },
				legend: {
					show: false,
					textStyle: {
						fontSize: 14, //字体大小
						color: '#ffffff', //字体颜色
					},
					data: ['当月', '上年'],
				},
				grid: {
					show: false,
					left: '5%',
					top: '15%',
					right: '7%',
					bottom: '13%',
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					axisLabel: {
						textStyle: {
							color: '#999999',
						},
					},
					axisLine: {
						show: true,
						// 坐标轴轴线样式设置
						lineStyle: {
							color: '#999999',
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#E5E5E5',
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: '#999999',
							},
						},
						axisLine: {
							show: true,
							// 坐标轴轴线样式设置
							lineStyle: {
								color: '#999999',
							},
						},
					},
				],
				series: [
					{
						name: '上年',
						type: 'bar',
						itemStyle: {
							normal: {
								color: 'rgb(50, 65, 87)',
							},
						},
						label: {
							normal: {
								show: false,
								color: 'red',
								position: 'top',
							},
						},
						barWidth: '20',
						data: [450, 8152, 200],
					},
				],
			};
			myChart.setOption(option);
			window.addEventListener('resize', function () {
				myChart.resize();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.root-box {
	padding: 20px 24px 40px 24px;
	background: #f8f8ff;

	.map-box {
		margin-top: 45px;
		display: flex;
		.left-box {
			flex: 1;
			min-width: 0;
			background: #fff;
			border-radius: 40px;
			position: relative;
			padding: 10px 0;
			.m-title {
				padding-left: 20px;
				padding-bottom: 10px;
			}
			.mapimg {
				width: 100%;
				height: calc(100% - 30px);
			}

			.map-type1 {
				position: absolute;
				right: 30px;
				bottom: 10px;

				/* display: flex; */
				overflow: hidden;
				cursor: pointer;
			}
			.map-type {
				position: absolute;
				left: 20px;
				top: 80px;
				background: #ffffff;
				border: 1px solid rgb(50, 65, 87);
				box-shadow: 0px 4px 8px 0px rgba(8, 155, 171, 0.2);
				display: flex;
				border-radius: 20px;
				display: flex;
				overflow: hidden;

				.map-type-btn {
					width: 136px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					span {
						padding-left: 9px;
						font-size: 18px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: left;
						color: rgb(50, 65, 87);
					}
				}
				.active {
					background: rgb(50, 65, 87);
					span {
						color: #fff;
					}
				}
			}
		}
		.right-box {
			margin-left: 24px;
			.r1-box {
				width: 508px;
				height: 158px;
				background: #ffffff;
				border-radius: 40px;
				box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
				position: relative;
				padding: 24px 34px;

				.bg-img {
					position: absolute;
					bottom: 0;
					right: 0;
				}
				.item-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 20px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: left;
						color: rgb(50, 65, 87);
					}
					.nubox {
						flex: 1;
						min-width: 0;
						text-align: left;

						.num {
							display: inline-block;
							width: 40px;
							height: 40px;
							background: #ffaa57;
							border-radius: 13px;
							font-size: 30px;
							font-family: SourceHanSansCN;
							font-weight: bold;
							text-align: center;
							color: #ffffff;
							line-height: 40px;
							margin-right: 20px;
						}
						.num:first-of-type {
							margin-left: 24px;
						}
						.unit {
							font-size: 14px;
							font-family: SourceHanSansCN;
							font-weight: normal;
							text-align: left;
							color: #333333;
						}
					}
				}
			}

			.r2-box {
				margin-top: 24px;
				width: 508px;
				height: 297px;
				background: #ffffff;
				border-radius: 40px;
				box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
				padding: 10px 20px;

				.age-content {
					width: 100%;
					height: calc(100% - 30px);
					.row-box {
						margin-top: 10px;
						display: flex;

						.age-icon {
							flex: 1;
						}
						.age-title {
							flex: 1;
							text-align: center;
							font-size: 14px;
							font-family: SourceHanSansCN;
							font-weight: normal;
							color: #000;
						}
					}
					.row-box2 {
						margin-top: 10px;
						text-align: center;
						font-size: 20px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						color: #000;
					}
				}
			}

			.r3-box {
				margin-top: 24px;
				width: 508px;
				height: 280px;
				background: #ffffff;
				border-radius: 40px;
				box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
				padding: 10px 20px;

				.r3-content {
					padding: 14px 10px;

					.r3-row-box {
						display: flex;
						justify-content: space-between;
					}

					.itemBox {
						display: flex;
						align-items: center;
						.itemContBox {
							margin-left: 20px;
							.itemNum {
								.num1 {
									background: #ceecea;
									border-radius: 16px;
									font-size: 30px;
									font-family: MicrosoftYaHei;
									font-weight: normal;
									text-align: left;
									color: #244a8b;
									padding: 0px 5px;
								}
								.num2 {
									margin-left: 5px;
									font-size: 14px;
									font-family: MicrosoftYaHei;
									font-weight: normal;
									text-align: left;
									color: #666666;
								}
							}
							.itemTitle {
								font-size: 18px;
								font-family: MicrosoftYaHei;
								font-weight: normal;
								text-align: left;
								color: #333333;
								margin-bottom: 6px;
							}
						}
					}
				}
			}
		}
	}

	.rank-box {
		margin-top: 25px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.rank-item {
			width: calc(50% - 12.5px);
			height: 400px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
			position: relative;
			padding: 10px 20px;

			.rank-content {
				width: 100%;
				height: calc(100% - 30px);
				display: flex;
				justify-content: space-between;

				.left2 {
					flex: 1;
					min-width: 0;

					.process-box {
						margin-top: 40px;
						display: flex;
						align-items: center;

						.title {
							font-size: 16px;
							font-family: MicrosoftYaHei;
							font-weight: normal;
							text-align: left;
							color: #333333;
							margin-right: 20px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 150px;
						}
					}
				}

				.right2 {
					width: 263px;
					height: 336px;
					background: #faffff;
					border: 1px solid #079aae;
					border-radius: 40px;
					padding: 10px 20px;

					.fwl-item {
						margin-top: 30px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							font-size: 24px;
							font-family: SourceHanSansCN;
							font-weight: normal;
							text-align: left;
							color: #333333;
							width: 50%;
						}
						.num {
							width: 50%;
							font-size: 30px;
							font-family: MicrosoftYaHei;
							font-weight: normal;
							text-align: left;
							color: #244a8b;
						}
					}
				}
			}
		}

		.left-box {
		}
		.right-box {
		}
	}

	.coustomer-box {
		margin-top: 25px;
		padding: 10px 20px;
		height: 427px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);

		.coustomer-content {
			display: flex;
			justify-content: space-between;
			height: calc(100% - 30px);
			.chart1 {
				width: 1180px;
				height: 100%;
			}
			.right3 {
				flex: 1;
				min-width: 0;
				padding-right: 20px;
				.item-row {
					display: flex;
					justify-content: space-between;
					.item-box {
						padding: 6px 15px;
						background: #ffffff;
						border: 1px solid #e5e5e5;
						border-radius: 0px 10px 10px 0px;
						position: relative;
						width: 246px;
						// height: 160px;
						.title {
							font-size: 18px;
							font-family: MicrosoftYaHei;
							font-weight: normal;
							text-align: left;
							color: rgb(50, 65, 87);
						}

						.item1 {
							width: 100%;
							display: flex;
							padding: 5px 0;
						}

						.title1 {
							font-size: 16px;
							font-family: MicrosoftYaHei;
							font-weight: normal;
							text-align: left;
							color: #333333;
						}
						.num1 {
							margin-left: 45px;
							font-size: 18px;
							font-family: MicrosoftYaHei;
							font-weight: normal;
							text-align: left;
							color: #244a8b;
						}
					}
					.item-box::before {
						content: '';
						display: block;
						position: absolute;
						left: 0;
						top: 0;
						height: 100%;
						width: 6px;
						background: #fead54;
						border-radius: 3px;
					}

					.item-box2::before {
						content: '';
						background: #d9726b;
					}

					.item-box3::before {
						content: '';
						background: #3e5c94;
					}

					.item-box4::before {
						content: '';
						background: rgb(50, 65, 87);
					}
				}
			}
		}
	}

	.info-box {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;

		.info-item-box {
			width: calc((100% - 75px) / 4);
			height: 340px;
			background: #ffffff;
			border-radius: 40px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		}
		.user-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40px;
			.line {
				width: 0px;
				height: 232px;
				border: 1px dashed rgb(50, 65, 87);
			}
			.sex {
				font-size: 18px;
				font-family: MicrosoftYaHei;
				font-weight: normal;
				text-align: center;
				color: #333333;
			}
			.pnum {
				font-size: 30px;
				font-family: MicrosoftYaHei;
				font-weight: normal;
				text-align: left;
				color: #244a8b;
				background: #ceecea;
				border-radius: 16px;
				padding: 0 5px;
			}
			.pnumunit {
				margin-left: 5px;
				font-size: 14px;
				font-family: MicrosoftYaHei;
				font-weight: normal;
				text-align: left;
				color: #666666;
			}
		}

		.marry-box {
			padding: 10px 20px;

			.chart2 {
				width: 100%;
				height: calc(100% - 30px);
			}
		}
	}

	.flow-box {
		margin-top: 25px;
		height: 455px;
		background: #ffffff;
		border-radius: 40px;
		box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
		padding: 10px 20px;

		.flow-content {
			padding-top: 20px;
			height: calc(100% - 30px);
			display: flex;
			justify-content: space-between;

			.content1 {
				width: 460px;
				height: 100%;

				.flow-item {
					text-align: left;
					padding: 20px 0;
					.title {
						font-size: 20px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: left;
						color: #333333;
					}
					.num {
						font-size: 20px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: left;
						color: #326bb2;
					}
				}
			}
			.content2 {
				flex: 1;
				min-width: 0;

				.chart5 {
					width: 100%;
					height: calc(100% - 60px);
				}
			}

			.content3 {
				width: 460px;
				height: 100%;
				.chart6 {
					width: 100%;
					height: calc(100% - 60px);
				}
			}

			.flow-header {
				position: relative;

				.flow-search {
					padding: 0 40px;
					position: absolute;
					right: 0;
					top: 0;
					display: flex;

					.search-btn {
						margin-left: 25px;
						width: 98px;
						height: 36px;
						background: #ffffff;
						border: 1px solid rgba(8, 155, 171, 0.8);
						border-radius: 8px;
						font-size: 18px;
						font-family: SourceHanSansCN;
						font-weight: normal;
						text-align: center;
						color: rgb(50, 65, 87);
						line-height: 36px;
						cursor: pointer;
						user-select: none;
					}
					.active {
						background: rgb(50, 65, 87);
						color: #fff;
					}
				}
				.title {
					font-size: 16px;
					font-family: SourceHanSansCN;
					font-weight: normal;
					text-align: left;
					color: rgb(50, 65, 87);
				}
				.line {
					margin-top: 6px;
					width: 167px;
					height: 1px;
					background: rgb(50, 65, 87);
					position: relative;
				}
				.line::before {
					content: '';
					position: absolute;
					left: 0;
					top: -4px;
					width: 17px;
					height: 4px;
					background: rgb(50, 65, 87);
				}
			}
		}
	}

	.time-box {
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		.left1 {
			padding: 10px 20px;
			width: calc((100% - 25px) / 2);
			height: 400px;
			background: #ffffff;
			border-radius: 16px;
			box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);

			.chart7 {
				width: 100%;
				height: calc(100% - 30px);
			}
		}
		.right1 {
		}
	}
}

.m-title {
	font-size: 20px;
	font-family: SourceHanSansCN;
	font-weight: normal;
	text-align: left;
	color: rgb(50, 65, 87);
}

::v-deep .el-progress-bar__outer {
	background: #d6e8e8 !important;
}

::v-deep .el-badge__content--warning {
	background: #fead54 !important;
}
.map-container {
	width: 100%;
	height: 100%;
}
.ol-zoom-in,
.ol-zoom-out {
	width: 24px;
	height: 24px;
}
</style>
